<template>
	<view>
		<view class="box-flex-center logo-box">
			<image src="@/static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="box box-card">
			<uni-forms ref="loginForm" :modelValue="loginForm" :rules="formRules" errShowType="toast">
				<uni-forms-item name="username">
					<uni-easyinput v-model="loginForm.username" placeholder="账号名/手机号" maxlength="20"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password" class="input-border">
					<uni-easyinput class="input-border" type="password" v-model="loginForm.password" placeholder="密码"
						maxlength="20"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<view class="box-flex-between" style="margin: 10px 0 30px 0; padding: 0 10px;">
						<navigator url="/pages/login/register" open-type="redirect" hover-class="none">用户注册
						</navigator>
						<navigator url="/pages/login/loginSms" open-type="redirect" hover-class="none">短信验证码登录
						</navigator>
						<navigator url="/pages/login/forgetPwd" open-type="redirect" hover-class="none">忘记密码
						</navigator>
					</view>
					<button class="form-button" @click="login">登录</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		<cu-agreement :checked="agreementChecked" @change="agreementChange"></cu-agreement>
	</view>
</template>

<script>
	import cuAgreement from '@/components/agreement.vue'
	export default {
		components: {
			cuAgreement
		},
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
					deviceInfo: ''
				},
				agreementChecked: false,
				formRules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入账号或手机号'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}]
					}
				}
			};
		},
		methods: {
			agreementChange(val) {
				this.agreementChecked = val;
			},
			login() {
				this.$refs.loginForm.validate().then(() => {
					if (this.agreementChecked) {
						uni.showLoading({
							mask: true,
							title: 'loading...'
						});

						let deviceInfo = getApp().globalData.deviceInfo
						this.loginForm.deviceInfo = JSON.stringify(deviceInfo)

						this.$api.post('/appLogin/loginPwd', this.loginForm).then(res => {
							if (res.data) {
								this.$util.saveLoginToken(res.data.token);
								uni.hideLoading();
								uni.reLaunch({
									url: '/pages/my/my'
								})
							}
						}).catch(err => {
							uni.hideLoading();
							this.$util.messageTip(err.message);
						})
					} else {
						this.$util.messageTip('请认真阅读隐私政策和用户协议，并勾选同意')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logo-box {
		padding: 50px 20px 20px 20px;

		image {
			width: 75px;
			height: 75px;
		}
	}
</style>
